<template>

	<!-- 搜索 -->

	<view class="content">
		<view style="background:  #fff" class="my-head">
			<view class="search-box  fl-t">
				<u-search :clearabled="true" :showAction='false' :placeholder="'搜索课程、机构'" 
					@change="searchChange" @search="search"></u-search>
			</view>

			<view class="head-right  " @click="quxiao()"> 取消
			</view>
		</view>
		<view class="occupy"></view>
		<!--历史记录-->
		<view class="content-box">
			<view class="lishijilu">
				<view class="title_box">
					<view class="title">历史记录</view>
					<u-icon name="trash" size="20"></u-icon>
				</view>

				<view class="fl-w" style="width: 100%;" v-if="NewlishijiluData.length>0">
					<view class="list-tab" v-for="(item,index) in NewlishijiluData">
						<view style="font-size: 26rpx;" @click="clickTab(item,index)">{{item}}</view>
						<u-icon @click="delTab(item, index)" size="15" name="close"
							style="margin-left: 10rpx;"></u-icon>
					</view>
				</view>
			</view>

			<view class="remensousuo">
				<view class="title">热门搜索</view>
				<view class="list-tab">
					<view v-for="item in hotJob" class="tabitem">
						<view @click="clickKeyWord(item)">{{item}} </view>
					</view>
				</view>
			</view>

			<view class="benzhoukecheng" v-if="RankingList.length>0">
				<view class="paihang_box">
					<view class="tit_box">
						<view class="tit">
							推荐课程
						</view>
						<u-icon name="arrow-right" color="#FFF"></u-icon>
					</view>
					<view class="neirong_box" v-for="(item,index)  in  RankingList" :key="index" v-if="index<4">
						<view @click="clickDetails(item)">
							<courseCourse :objectData="item"></courseCourse>
						</view>

						<view class="shuqian" :style="{'border-top':'41rpx solid'+item.color,'border-left':'21rpx solid'+item.color,
							'border-right':'21rpx solid'+item.color,}">
						</view>
						<view class="xuhao">
							<text style="text-align: center;">{{index+1}}</text>
						</view>
						<view class="bofang">
							<image src="/static/image/packageD/bofang.png"></image>
						</view>

						<!-- 	<view class="imgebox">
							<image class="imgg" :src="URL+item.Cover" :mode="'aspectFill'"></image>
							<view class="shuqian" :style="{'border-top':'41rpx solid'+item.color,'border-left':'21rpx solid'+item.color,
								'border-right':'21rpx solid'+item.color,}">
							</view>
							<view class="xuhao">
							<text style="text-align: center;">{{index+1}}</text></view>
						</view>
						<view class="rig_neirong">
							<view class="timu">{{item.Title}}</view>
							<view class="xuexi">{{item.StudyCount}}人好评</view>
						</view> -->


					</view>
				</view>
			</view>
		</view>


	</view>
</template>

<script>
	import courseCourse from "@/pages/views/packageD/template/crossCourse2.vue"
	export default {

		data() {
			return {
				URL: this.$config.domain.staticUrl,
				AddressRes: [], //过滤后传后端的结果
				keyWord: '', //搜索内容
				//职位
				positionList: [],
				page: 1,
				size: 10,
				more: true,

				IsHot: 1, //职位分类ID
				PageIndex: 1, //页码
				PageSize: 5, //每页大小
				Newlishijilu: [], //历史记录存值
				NewlishijiluData: [], //历史记录存值
				hotJob: [], //热门搜索词
				RankingList: [], //推荐课程
				PageIndex: 1,
				PageSize: 10,
				size: 8, //热门搜索词量

			}
		},
		onLoad(o) {
			// if (o && o.city != undefined) {
			// 	this.city1 = o.city
			// } else {
			// 	this.city1 = '搜索'
			// }

		},
		components: {
			courseCourse
		},
		computed: {},
		onShow() {
			if (uni.getStorageSync("NewlishijiluData")) {
				this.NewlishijiluData = uni.getStorageSync("NewlishijiluData").reverse();
			}
			if (this.NewlishijiluData.length > 0) {
				let uniqueArray = this.NewlishijiluData.filter((item, index, array) => {
					return array.indexOf(item) === index
				})
				this.NewlishijiluData = uniqueArray

			}
		},
		// 初次渲染
		onReady() {


		},
		watch: {

		},
		created() {

			this.RecommendedCourses()
			this.hotData()
		},

		methods: {
			// 取消
			quxiao() {
				// 返回上一页
				uni.navigateBack()
			},
			// 热门搜索
			hotData() {
				this.$http.digitalize.hot_search().then(res => {
					if (res.Success) {
						this.hotJob = res.Result
					}
				})
			},
			// 推荐课程数据
			RecommendedCourses() {
				let obj = {
					PageIndex: this.PageIndex,
					PageSize: this.PageSize
				}
				this.$http.digitalize.recommend(obj).then(res => {
					if (res.Success) {
						this.RankingList = res.Result.map((item, index) => {
							if (index == 0) {
								return {
									...item,
									color: '  #F35370'
								}
							} else if (index == 1) {
								return {
									...item,
									color: '#F36853'
								}
							} else if (index == 2) {
								return {
									...item,
									color: '#F5A130'
								}
							} else if (index == 3) {
								return {
									...item,
									color: ' #F5A130'
								}
							} else {
								return {
									...item,
								}
							}
						})
						console.log("111", this.RankingList);
					}
				})
			},

			searchHotJob() {
				let obj = {
					IsHot: this.IsHot, //职位分类ID
					PageIndex: this.PageIndex, //页码
					PageSize: this.PageSize, //每页大小
				}
				this.$http.huirc.jobsearch(obj).then(res => {
					// console.log(res);
					if (res.Result) {
						this.hotJob = res.Result.Items
					}
				})
			},

			searchChange(e) {
				// console.log(e);

			},
			search(e) {
				if (e !== '' && e.replace(/ /g, "") !== "") {
					this.keyWord = e
					// uni.setStorageSync('NewlishijiluData', []);

					console.log(uni.getStorageSync('NewlishijiluData'));

					if (uni.getStorageSync('NewlishijiluData')) {
						this.Newlishijilu = uni.getStorageSync('NewlishijiluData');
						this.Newlishijilu.push(this.keyWord)
						// console.log(this.Newlishijilu);

						uni.setStorageSync('NewlishijiluData', this.Newlishijilu)
						this.goSearch()
						this.keyWord = ''

					} else {

						this.Newlishijilu.push(this.keyWord);
						// console.log(this.Newlishijilu);
						uni.setStorageSync('NewlishijiluData', this.Newlishijilu)
						this.goSearch()
						this.keyWord = ''
					}


				} else {
					this.$util.toast("搜索内容不能为空")
				}



			},


			// 热门搜索点击
			clickHotJob(e) {
				console.log(e);
			},


			clickTab(val, index) {
				console.log(val, index);
				this.keyWord = val
				let List = uni.getStorageSync('NewlishijiluData')
				if (List.includes(val)) {
					List.unshift(val);
					uni.setStorageSync("NewlishijiluData", List);
				}
				this.goSearch()
			},
			delTab(val, index) {
				console.log(val, index);
				this.NewlishijiluData.splice(index, 1)
				uni.setStorageSync('NewlishijiluData', this.NewlishijiluData)
			},



			goSearch() {
				uni.navigateTo({
					// url: '/pages/views/packageA/type-jobhunting/search/searchResult?keyword=' + 
					url: `/pages/views/packageD/type-jobhunting/shuzihua/searchResult?keyWord=${this.keyWord}`
				})
				this.keyWord = ''
			},
			// 点击推荐课程进入
			clickDetails(item) {
				if (item.Type >= 0) {
					if (item.Type != 1) {
						uni.navigateTo({
							url: `/pages/views/packageD/type-jobhunting/shuzihua/details?id=${item.Id}&index=${item.Type}`,
						});
					} else {
						uni.navigateTo({
							url: `/pages/views/packageD/type-jobhunting/shuzihua/OfflineCourseDetails?id=${item.Id}`,
						});
					}
				} else {
					uni.navigateTo({
						url: `/pages/views/packageD/type-jobhunting/shuzihua/details?id=${item.Id}&index=${index}`,
					});
				}
			},
			clickKeyWord(item){
				console.log(item);
				this.keyWord=item
				this.goSearch()
			}
		}
	}
</script>

<style>
	page {
		background-color: #fff;
	}
</style>
<style lang="scss" scoped>
	.page-bg {
		width: 100%;
		min-height: 100vh;
		background-color: #f9f9f9;
	}

	.occupy {
		height: calc(88rpx + var(--status-bar-height));
	}

	.content {
		position: relative;
		background-color: #fff;
	}

	.my-head {
		position: fixed;
		top: 0;
		width: 100%;
		padding: var(--status-bar-height) 40rpx 0 40rpx;
		height: calc(88rpx + var(--status-bar-height));
		display: flex;
		//justify-content: space-between;  
		align-items: center;
		box-sizing: border-box;
		z-index: 999;



		.search-box {

			border-radius: 32px;
			height: 64rpx;
			margin-right: 20rpx;
			box-sizing: border-box;
			flex: 1;


			input {
				width: auto !important;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333;
				margin-left: 20rpx;
				flex: 1;
			}

			.input-pla {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #999999;
			}
		}



		.head-right {
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #666666;
			min-width: 70rpx;
			text-align: end;
		}
	}


	.content-box {
		padding: 20rpx 40rpx;
		width: 100%;
		box-sizing: border-box;

		.lishijilu {
			max-height: 260rpx;
			overflow: hidden;

			.title_box {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.title {
					margin: 30rpx 0;
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: 800;
					color: #313131;
				}
			}

			.list-tab {
				margin: 0 20rpx 20rpx 0;
				padding: 14rpx 20rpx;
				background: #F7F7F7;
				border-radius: 10rpx;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #000000;
				display: flex;
			}
		}

		.remensousuo {
			.title {
				margin: 30rpx 0;
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 800;
				color: #313131;
			}

			.list-tab {
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;

				.tabitem {
					width: 50%;
					padding: 17rpx 0;
					//超出一行省略号
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;

				}
			}

		}

		.benzhoukecheng {
			padding: 20rpx 0rpx;

			.kechengTitle {
				font-size: 32rpx;
				font-weight: bold;
				color: #000000;
			}

			.paihang_box {
				background-image: url('/static/image/packageD/kechengpaihang.png');
				background-repeat: no-repeat;
				background-size: cover;
				padding: 30rpx 30rpx 10rpx;
				margin: 20rpx 0;
				border-radius: 10rpx 10rpx 10rpx 10rpx;

				.tit_box {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 20rpx;
					font-size: 28rpx;
					font-weight: bold;
					color: #000000;

				}

				.neirong_box {
					background-color: #fff;
					display: flex;
					border-radius: 10rpx;
					margin-bottom: 20rpx;
					position: relative;


					.shuqian {
						position: absolute;
						border-bottom: 21rpx solid transparent;
						position: absolute;
						z-index: 3;
						top: 20rpx;
						left: 20rpx;
					}

					.xuhao {
						position: absolute;
						display: flex;
						justify-content: center;
						align-items: center;
						top: 22rpx;
						left: 36rpx;
						z-index: 4;
						font-size: 28rpx;
						font-weight: 500;
						color: #FFFFFF;
					}

					.bofang {
						position: absolute;
						bottom: 10rpx;
						right: 20rpx;

						image {
							width: 40rpx;
							height: 40rpx;
						}
					}
				}
			}
		}


	}
</style>